<template>
  <span :class="[prefixCls, theme]" @click="toggleCollapsed">
    <MenuUnfoldOutlined v-if="getCollapsed" />
    <MenuFoldOutlined v-else />
  </span>
  <!-- <span :class="[theme]">
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        功能模块
        <DownOutlined />
      </a>
      <template #overlay>
        <a-layout class="nav-product-panel">
          <a-layout-content>
            <a-menu
              theme="dark"
              mode="horizontal"
              :style="{ lineHeight: '64px' }"
            >
              <a-menu-item key="1">nav 1</a-menu-item>
              <a-menu-item key="2">nav 2</a-menu-item>
              <a-menu-item key="3">nav 3</a-menu-item>
            </a-menu>
          </a-layout-content>
        
        </a-layout>
      </template>
    </a-dropdown>
  </span> -->
  
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { propTypes } from '/@/utils/propTypes';

export default defineComponent({
  name: 'HeaderTrigger',
  components: { MenuUnfoldOutlined, MenuFoldOutlined, DownOutlined },
  props: {
    theme: propTypes.oneOf(['light', 'dark']),
  },
  setup() {
    const { getCollapsed, toggleCollapsed } = useMenuSetting();
    const { prefixCls } = useDesign('layout-header-trigger');
    return { getCollapsed, toggleCollapsed, prefixCls };
  },
});
</script>

<style lang="less">

// .nav-product-panel{
//   background: #04142c;
//   height: inherit;
//   max-height: calc(100vh - 68px);
//   min-height: 500px;
//   overflow: auto;
//   box-sizing: border-box;

//   max-width: calc(100vw - 142px);
//   position: relative;
//   margin-left: auto;
//   min-width: 1100px;
// }
</style>